<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="application/javascript" src="dist/js/jquery-3.2.1.min.js"></script>
    <script type="application/javascript" src="dist/layer/layer.js"></script>

    <style>
        body{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 100%;
            height: 1008px;
            background: url("dist/img/back.png") no-repeat 0 -100px;
        }
        /*head部分*/
        header{
            background: #1b2c5a;
            filter:alpha(opacity=80); /*IE滤镜，透明度50%*/
            -moz-opacity:0.8; /*Firefox私有，透明度50%*/
            opacity:0.8;/*其他，透明度50%*/
            width: 100%;
        }
        .head1{
            height: 150px;
        }
        .head2{
            height: 120px;
        }
        /*主体部分*/
        .boxBody{
            width: 100%;
            height: 908px;
            background: url("dist/img/boxBack.png") no-repeat;
        }
        /*footer部分*/
        footer{
            width: 100%;
            height: 100px;
            background: #004598;
            filter:alpha(opacity=80);
            -moz-opacity:0.8;
            opacity:0.8;
        }
    </style>


</head>
<body>
    <div class="box">
        <div class="boxBody">
            <header class="head2">


            </header>

        </div>
        <footer>


        </footer>
    </div>
    <!--<div class="boxBody">
        <header class="type1">


        </header>


    </div>
    <footer>


    </footer>-->
</body>
</html>